<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>BFC原理</title>
	</head>

	<body>
		<!--
        	独立布局模块
			float的值不为none。
			overflow的值不为visible。
			display的值为table-cell, table-caption, inline-block中的任何一个。
			position的值不为relative和static。
        -->
        <!--
        	如果bfc容器给了宽度，那么就按照给的宽度。
        	如果不给，即使里面元素是float那么也会按照其宽度来设置父元素的宽度
        	也可以看出他的一个特性，内部完全独立，第二个div挨着第一个div排列。而不会收到img的影响
        -->
		<div style="background-color: rosybrown;float: left;width: 100px;height: 100px;">这也是一个测试
				<img width="200" src="img/bag_01.png" style="float: left;"/>
		</div>
		<div style="float: left;width: 200px;height: 200px;background: greenyellow;"></div>
	</body>

</html>